<script setup>
import {computed, onMounted, ref, watch} from "vue";
import store, {cosSource, cosSourcePetHead, petHeadSource, suitSource, typeSource} from "../../store/store.js";
import {searchPets} from "../../utils/commonCall.js";
import {getEnableItem} from "../../utils/banpickCall.js";

const countDown = computed(() => Date.now() + store.state.game.unilateral.count_down*1000)
const phase = computed(() => store.getters.getCurrentPhaseInfo)

const itemData = ref([])
const itemType = ref('pet')
const page = ref({
  pageNo: 1,
  pageSize: 60,
  total: 0
})
const searchInput = ref()
const searchPetsList = () => {
  searchPets(searchInput.value.value, page.value.pageNo, page.value.pageSize).then(res => {
    itemData.value = res.data.data
    page.value.total = res.data.total
  })
}
const enableItem = () => {
  getEnableItem(page.value.pageNo, page.value.pageSize).then(res => {
    itemData.value = res.data.data
    page.value.total = res.data.total
    itemType.value = res.data.item
  })
}
const searchButtonClick = () => {
  if (searchInput.value.value) {
    page.value.pageNo = 1
    searchPetsList()
  } else {
    page.value.pageNo = 1
    enableItem()
  }
}
const handlePageChange = (currentPage, pageSize) => {
  page.value.pageNo = currentPage
  page.value.pageSize = pageSize
  if (searchInput.value.value) {
    searchPetsList()
  } else {
    enableItem()
  }
}


const itemSelected = computed(() => store.state.game.payload.value)
const selectItem = (value) => {
  if (itemSelected.value === value) {
    store.commit('setItemSelected', {value: 0})
    return
  }
  store.commit('setItemSelected', value)
}

watch(() => store.getters.getCurrentPhaseInfo, () => {
  searchInput.value.value = ''
  enableItem()
})
watch(() => store.state.eventSignal.rollType, () => {
  enableItem()
})

onMounted(() => {
  enableItem()
})

</script>

<template>
  <div class="search-pick-header">
    <div style="width: 90%; display: flex">
      <el-form inline style="height: 100%; width: 100%;">
        <el-form-item style="height: 100%; width: 25%">
          <div :style="{backgroundImage: `url('${cosSource}UI/serchBox.png')`}" class="search-pick-input">
            <input style="font-size: 20px; margin: 5px 0 0 5px;color: #e5e6e8; background: none; border: none; outline: none;" ref="searchInput" placeholder="搜索精灵"/>
          </div>
        </el-form-item>
        <el-form-item style="height: 100%; width: 10%">
          <div class="search-pick-button" :style="{backgroundImage: `url('${cosSource}UI/serch.png')`}" @click="searchButtonClick"/>
        </el-form-item>
        <el-form-item style="height: 100%; width: 15%">
          <el-countdown format="ss" :value="countDown" :value-style="{color: 'white'}"/>
        </el-form-item>
        <el-form-item style="height: 100%; width: 25%">
          <span style="color: white; font-size: large; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;">
            阶段：{{ phase.phase_text }}
          </span>
        </el-form-item>
      </el-form>
    </div>
  </div>
  <div :style="{height: '65%', margin: '0 10px 0 10px', padding: '5px',
        backgroundImage: `url('${cosSource}UI/headChoseBox.png')`, backgroundRepeat: 'round'}">
    <el-scrollbar >
      <div v-if="itemType === 'pet'" class="search-pick-content">
        <div v-for="item in itemData" class="item-container"
             @click="selectItem({value: item.pet_id, pet_origin_id: item.pet_origin_id})">
          <div v-if="item.pet_id === itemSelected" style="width: 85%; border: 3px solid #03a9f4;">
            <img :src="`${item.pet_origin_id>4810 ? cosSourcePetHead : petHeadSource}${item.pet_head}`" style="width: 100%">
          </div>
          <img v-else :src="`${item.pet_origin_id>4810 ? cosSourcePetHead : petHeadSource}${item.pet_head}`" style="width: 90%">
          <div style="position: absolute; bottom: 20%; right: 3%; height: 30%">
            <img v-if="item.pet_id % item.pet_origin_id === 1"
                 :src="`${cosSource}UI/featureUp.png`" style="height: 80%"/>
            <img v-if="item.pet_id % item.pet_origin_id === 2"
                 :src="`${cosSource}UI/skillUp.png`" style="height: 80%"/>
            <img v-if="item.pet_origin_id === 4643"
                 :src="`${cosSource}statusCondition/${item.pet_id % item.pet_origin_id}.png`" style="height: 80%"/>
            <img v-if="'ex_mark' in item && item.ex_mark === 1"
                 :src="`${cosSource}UI/old.png`" style="height: 80%"/>
          </div>
        </div>
      </div>
      <div v-else-if="itemType === 'pet_type'" class="search-pick-content">
        <div v-for="item in itemData" class="item-container" @click="selectItem({value: item.pet_type_id})">
          <div v-if="item.pet_type_id === itemSelected" style="width: 85%; border: 3px solid #03a9f4;">
            <img v-if="item.pet_type_id === 8" :src="`${typeSource}prop.png`" style="width: 100%">
            <img v-else :src="`${typeSource}${item.pet_type_id}.png`" style="width: 100%">
          </div>
          <img v-else-if="item.pet_type_id === 8" :src="`${typeSource}prop.png`" style="width: 100%">
          <img v-else :src="`${typeSource}${item.pet_type_id}.png`" style="width: 90%">
        </div>
      </div>
      <div v-else-if="itemType === 'suit'" class="search-pick-content">
        <div v-for="item in itemData" class="item-container" @click="selectItem({value: item.suit_id})">
          <div v-if="item.suit_id === itemSelected" style="width: 85%; border: 3px solid #03a9f4;">
            <img :src="`${suitSource}${item.suit_id}.png`" style="width: 100%">
          </div>
          <img v-else :src="`${suitSource}${item.suit_id}.png`" style="width: 90%">
        </div>
      </div>
    </el-scrollbar>
  </div>


  <div style="display: flex;flex-direction: row-reverse">
    <el-pagination :page-size="page.pageSize" :total="page.total" layout="prev, pager, next"
                   @change="handlePageChange"/>
  </div>

</template>

<style scoped>
.search-pick-header {
  margin-top: 5px;
  width: 100%;
  height: 10%;
  display: flex;
  justify-content: center;
}
.search-pick-input {
  height: 80%;
  width: 100%;
  background-repeat: round;
}
.search-pick-button {
  height: 80%;
  width: 100%;
  background-repeat: round;
  cursor: pointer;
}

.search-pick-content {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
}

.item-container {
  width: 80px;
  height: 80px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.el-pagination {
  --el-pagination-font-size: 18px;
  --el-pagination-bg-color: rgba(255, 255, 255, 0);
  --el-pagination-text-color: white;
  --el-pagination-border-radius: 2px;
  --el-pagination-button-color: white;
  --el-pagination-button-width: 32px;
  --el-pagination-button-height: 32px;
  --el-pagination-button-disabled-color: white;
  --el-pagination-button-disabled-bg-color: rgba(255, 255, 255, 0);
  --el-pagination-button-bg-color: white;
  --el-pagination-hover-color: #0d9cd9;
  --el-pagination-item-gap: 16px;
  white-space: nowrap;
  color: var(--el-pagination-text-color);
  font-size: var(--el-pagination-font-size);
  font-weight: 400;
  display: flex;
  align-items: center;
}
</style>